<template>
  <a-modal
    v-model:visible="visible"
    title="新增楼盘"
    :maskClosable="false"
    @ok="handleOk"
    :style="{
      top: '0px',
      width: winWidth + 'px',
      minHeight: winHeight + 'px',
      height: 'auto',
    }"
  >
    <a-radio-group v-model:value="currentTab" button-style="solid">
      <a-radio-button
        v-for="(item, idx) in tabs"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</a-radio-button
      >
    </a-radio-group>
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
      :style="{
        top: '0px',
        width: '100%',
        height: winHeight + 'px',
        overflow: 'hidden',
        overflowY: 'scroll',
      }"
    >
      <session v-show="currentTab == 'baseInfo'"
        ><BaseInfoForm ref="baseInfoForm"></BaseInfoForm
      ></session>
      <session v-show="currentTab == 'saleInfo'"
        ><SaleInfoForm ref="saleInfoForm"></SaleInfoForm
      ></session>
      <session v-show="currentTab == 'villagePlanning'"
        ><VillagePlanningForm ref="villagePlanningForm"></VillagePlanningForm
      ></session>
      <session v-show="currentTab == 'units'"
        ><UnitsForm ref="unitsForm"></UnitsForm
      ></session>
      <session v-show="currentTab == 'matching'"
        ><MatchingForm ref="matchingForm"></MatchingForm
      ></session>
      <session v-show="currentTab == 'photos'"
        ><PhotosForm ref="photosForm"></PhotosForm
      ></session>
    </a-card>

    <template #footer>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
        >提交</a-button
      >
      <a-button key="back" @click="handleCancel">返回</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal, timestamp } from "@/utils/common";
import { submit } from "./index";
import BaseInfoForm from "./forms/baseInfo.vue";
import SaleInfoForm from "./forms/saleInfo.vue";
import VillagePlanningForm from "./forms/villagePlanning.vue";
import UnitsForm from "./forms/units.vue";
import MatchingForm from "./forms/matching.vue";
import PhotosForm from "./forms/photos.vue";

export default defineComponent({
  components: {
    BaseInfoForm,
    SaleInfoForm,
    VillagePlanningForm,
    UnitsForm,
    MatchingForm,
    PhotosForm,
  },
  setup(props, context) {
    const emit = defineEmits(["refreshTable"]);
    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);
    const winWidth = ref(document.body.clientWidth);
    const winHeight = ref(document.body.clientHeight - 200);
    const now = ref();

    const baseInfoForm = ref();
    const saleInfoForm = ref();
    const villagePlanningForm = ref();
    const unitsForm = ref();
    const matchingForm = ref();
    const photosForm = ref();

    const formValue = ref({
      baseInfo: {},
      saleInfo: {},
      villagePlanning: {},
      priceInfo: {},
      units: [],
      matching: {},
      photos: [],
    } as any);

    const tabs = ref([
      { label: "基本信息", value: "baseInfo" },
      { label: "销售信息", value: "saleInfo" },
      { label: "小区规划", value: "villagePlanning" },
      { label: "主力户型", value: "units" },
      { label: "周边配套", value: "matching" },
      { label: "相册", value: "photos" },
    ]);
    const currentTab = ref("baseInfo");

    const initData = () => {};

    const display = () => {
      now.value = timestamp();
      visible.value = true;
      initData();
    };

    //确定按钮点击事件
    const handleOk = () => {
      validateParams()
        .then((res: any) => {
          loading.value = true;
          submit(formValue.value)
            .then((res: any) => {
              loading.value = false;
              message.success("提交成功");
              visible.value = false;
              context.emit("refreshTable");
            })
            .catch((res: string) => {
              loading.value = false;
              message.error(res);
            });
        })
        .catch((res: string) => {
          message.error(res);
        });
    };

    //校验数据
    const validateParams = () => {
      return new Promise((resolve: any, reject: any) => {
        resolve("ok");
      });
    };

    const handleCancel = () => {
      //formValue.content = "";
      visible.value = false;
    };

    onMounted(() => {
      window.onresize = () => {
        winWidth.value = document.body.clientWidth / 2;
        winHeight.value = document.body.clientHeight - 200;
      };
    });

    onBeforeUnmount(() => {});

    //返回数据
    return {
      visible,
      display,
      handleOk,
      handleCancel,
      loading,
      formValue,
      winWidth,
      winHeight,
      baseInfoForm,
      saleInfoForm,
      villagePlanningForm,
      matchingForm,
      photosForm,
      now,
      tabs,
      currentTab,
      unitsForm,
    };
  },
});
</script>
